<template>
	<div class="trainRobFinish train">
		<trainHeader name="抢票详情" btn="抢票须知" @btnClick="rightBtnEvent"></trainHeader>
		<div class="trainRobFinish_header" v-if="isShow">
			<div class="trainRobFinish_header_pic">
				<img src="http://h5.kpcx179.com/wximages/train/jiasu@2x.png" alt="" />
			</div>
			<div class="trainRobFinish_header_content">
				<div v-if="message.presellFlag">预约成功</div>
				<div v-else>{{robTicketSpeedUpObj[~~(message.helpNum/10)-1].speed}}抢票中</div>
				<div class="trainRobFinish_header_message" v-if="message.presellFlag">
					{{message.startTime | changeDate}}开始抢票，将为您抢票至{{message.closeTime | changeDate}}，可以邀请更多好友可以帮您抢票，抢票几率会更高呦
				</div>
				<div class="trainRobFinish_header_message" v-else>
					已抢票{{message.times}}次，将为您抢票至{{message.closeTime | changeDate}}，可以邀请更多好友可以帮您抢票，抢票几率会更高呦
				</div>
			</div>
		</div>
		<div class="trainRobFinish_box_shell" v-if="isShow">
			<div class="trainRobFinish_box">
				<div class="trainRobFinish_box_title">当前速度</div>
				<div class="trainRobFinish_box_all">
					<div v-for="item,key in robTicketSpeedUpObj" :class="{start:key==0,end:key==4,active:key==~~(message.helpNum/10)-1,}">
						<span>{{item.speed}}</span>
						<div class="trainRobFinish_box_all_line" :class="{start:key==0,end:key==4}">
							<span></span>
						</div>
					</div>
				</div>
				<div class="trainRobFinish_box_line">
					<div class="trainRobFinish_box_active" :style="{width:((message.helpNum-10)*2.5) + '%'}"></div>
				</div>
				<div class="trainRobFinish_box_tip" v-if="WeChatFlag">
					<div class="trainRobFinish_box_tip_message">
						还差<span>{{message.helpNum | getHelpNum}}个</span>加速包，至{{message.helpNum | getRobGrade}}抢票。通过<span>邀请好友助力可以增加加速包个数</span>，从而提升抢票成功率	
					</div>
					<div class="trainRobFinish_box_tip_btn" @click="changeShareShow">
						立即加速
					</div>
				</div>
			</div>
		</div>
		<div class="trainRobFinish_message_shell" v-if="isShow">
			<div class="trainRobFinish_message">
				<div class="trainRobFinish_message_title">
					抢票任务
				</div>
				<div class="trainRobFinish_message_content">
					<div>
						<span>行程</span>
						<div>
							{{message.fromStation}} - {{message.toStation}}
						</div>
					</div>
					<div>
						<span>乘客</span>
						<div>
							{{message.passengers | getPassengers}}
						</div>
					</div>
					<div>
						<span>日期</span>
						<div>
							{{message.multiTicketTime,message.departDate | multiTicketTime}}
						</div>
					</div>
					<div>
						<span>车次</span>
						<div>
							{{message.multiTrainNo,message.trainNo | multiTrainNo}}
						</div>
					</div>
					<div>
						<span>坐席</span>
						<div>
							{{message.mainSeatClassName,message.multiSeatClass | seatClass}}
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="trainRobFinish_bottom">
			<div @click="cancel">取消订单</div>
			<div class="trainRobFinish_new" @click="refresh">刷新抢票进度</div>
		</div>
		<!--蒙层-->
		<div class="trainRobFinish_share" v-if="shareShow" @click="changeShareShow" @touchmove.prevent>
			<!--<div class="trainRobFinish_share_box" @click.stop>
				<div class="trainRobFinish_share_title">
					邀请好友助力
				</div>
				<div class="trainRobFinish_share_pic">
					<div class="trainRobFinish_share_btn" @click="WeChatFriend">
						<img src="../../../assets/train/weixin@2x.png" alt="" />
						<div>微信好友</div>
					</div>
					<div class="trainRobFinish_share_btn" @click="WeChatFriendCircle">
						<img src="../../../assets/train/pengyouquan@2x.png" alt="" />
						<div>朋友圈</div>
					</div>
				</div>
				<div class="trainRobFinish_share_cancel" @click="changeShareShow">
					取消
				</div>
			</div>-->
			<div class="trainRobFinish_share_tip">
				<img src="../../../assets/train/train_tip.png" alt="" />
			</div>
		</div>
		<!--弹窗-->
		<trainCancelMask v-show="cancelFlag" @mask='cancelClick' @cancel="cancelOrder" :promptMessage="promptMessage"></trainCancelMask>
	</div>
</template>
<style scoped>
	.trainRobFinish {
		padding-bottom: 98px;
	}
	
	.trainRobFinish_header {
		width: 100%;
		height: 240px;
		padding: 40px 52px 24px 15px;
		box-sizing: border-box;
		background-image: linear-gradient(-82deg, #50c9c3 0%, #0aeecb 100%);
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.trainRobFinish_header_pic {
		width: 90px;
		height: 90px;
		margin-right: 26px;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 3px solid #fff;
		border-radius: 50%;
	}
	
	.trainRobFinish_header_pic > img {
		width: 48px;
		height: 59px;
		margin-left: 5px;
	}
	
	.trainRobFinish_header_content {
		flex: 1;
		font-size: 36px;
		color: #fefefe;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		height: 100%;
		
	}
	
	.trainRobFinish_header_message {	
		line-height: 38px;
		font-size: 28px;
	}
	
	.trainRobFinish_box_shell {
		padding: 13px 18px 30px;
	}
	
	.trainRobFinish_box {
		width: 100%;
		/*height: 300px;*/
		background: #fff;
		border-radius: 10px;
		padding-bottom: 30px;
	}
	
	.trainRobFinish_box_title {
		font-size: 28px;
		color: #333333;
		padding-left: 30px;
		width: 100%;
		box-sizing: border-box;
		height: 70px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-bottom: 2px solid #f4f5f9;
		margin-bottom: 26px;
	}
	
	.trainRobFinish_box_all {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 16px;
	}
	
	.trainRobFinish_box_all > div {
		/*width: 20%;*/
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		font-size: 24px;
		color: #c8c8c8;
	}
	
	.trainRobFinish_box_all > div.start {
		align-items: flex-start;	
	}
	
	.trainRobFinish_box_all > div.end {
		align-items: flex-end;
	}
	
	.trainRobFinish_box_all > div.active {
		color: #333333;
	}
	
	.trainRobFinish_box_all_line {
		height: 10px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 8px;
		margin-bottom: 5px;
	}
	
	.trainRobFinish_box_all_line.start {
		justify-content: flex-start;	
	}
	
	.trainRobFinish_box_all_line.end {
		justify-content: flex-end;
	}
	
	.trainRobFinish_box_all_line > span {
		width: 2px;
		height: 100%;
		background-color: #cfcfcf;
	}
	
	.trainRobFinish_box_line {
		width: 687px;
		height: 6px;
		border-radius: 3px;
		background: #E0E1E7;
		margin: 0 16px;
	}
	
	.trainRobFinish_box_line > div {
		width: 100%;
		height: 100%;
		border-radius: 3px;
		background: #FF7C47;
	}
	
	.trainRobFinish_box_tip {
		margin-top: 35px;
		position: relative;
		top: 0;
		left: 0;
		padding: 0 16px;
	}
	
	.trainRobFinish_box_tip_message {
		width: 100%;
		font-size: 26px;
		color: #333333;
		line-height: 48px;
	}
	
	.trainRobFinish_box_tip_message > span {
		color: #ff953f;
	}
	
	.trainRobFinish_box_tip_btn {
		position: absolute;
		right: 16px;
		bottom: 0px;
		width: 137px;
		height: 45px;
		background-color: #3bc3c2;
		border-radius: 6px;
		font-size: 26px;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.trainRobFinish_message_shell {
		padding: 18px;
	}
	
	.trainRobFinish_message {
		width: 100%;
		background-color: #ffffff;
		border-radius: 10px;
	}
	
	.trainRobFinish_message_title {
		height: 80px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-left: 30px;
		font-size: 28px;
		color: #333333;
		border-bottom: 2px solid #e1e1e1;
	}
	
	.trainRobFinish_message_content {
		padding: 39px 30px 28px;
	}
	
	.trainRobFinish_message_content > div {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 28px;
		color: #333333;
		margin-bottom: 30px;
		line-height: 45px;
	}
	
	.trainRobFinish_message_content > div:last-child {
		margin-bottom: 0px;
	}
	
	.trainRobFinish_message_content > div > span {
		color: #8a8a8a;
		margin-right: 54px;
		width: 10%;
	}
	
	.trainRobFinish_message_content > div > div {
		width: 80%;
	}
	
	.trainRobFinish_bottom {
		height: 98px;
		width: 100%;
		font-size: 36px;
		color: #333333;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: fixed;
		left: 0;
		bottom: 0;
	}
	
	.trainRobFinish_bottom > div {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 281px;
		background: #fff;
	}
	
	.trainRobFinish_bottom > .trainRobFinish_new {
		background-color: #3bc3c2;
		color: #fefefe;
		width: 469px;
	}
	
	.trainRobFinish_share {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0,0,0,0.75);
		z-index: 300;
	}
	
	.trainRobFinish_share_box{
		width: 594px;
		height: 375px;
		background-color: #ffffff;
		border-radius: 25px;
	}
	
	.trainRobFinish_share_title {
		font-size: 32px;
		color: #333333;
		margin: 42px 0 51px;
		text-align: center;
	}
	
	.trainRobFinish_share_pic {
		padding: 0 154px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 35px;
	}
	
	.trainRobFinish_share_btn {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		font-size: 26px;
		color: #333333;
	}
	
	.trainRobFinish_share_btn > img {
		width: 84px;
		height: 84px;
		margin-bottom: 25px;
	}
	
	.trainRobFinish_share_cancel {
		height: 80px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32px;
		color: #333333;	
		border-top: 2px solid #e7e7e7;
	}
	
	.trainRobFinish_share_tip {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: flex-end;
		align-items: flex-start;
	}
	
	.trainRobFinish_share_tip > img {
		width: 566px;
		height: 371px;
		margin-right: 30px;
	}
</style>
<script>
	import trainHeader from "../../../components/trainHeader";
	import share from "../../../public/share.js";//分享函数
	import trainCancelMask from "../../../components/trainCancelMask"; //弹窗 //层级350
	import robTicketSpeedUpObj from "./trainRobTicketSpeedUp.js"; //抢票加速信息
	export default {
		name: "trainRobFinish",
		data() { //数据
			return {
				orderNum:"",//订单号
				message:"",
				robTicketSpeedUpObj:null,//加速数据
				isShow:false,
				timer:null,//定时器
				isFirst:true,
				shareShow:false,//分享展示
				share:null,//分享函数
				WeChatFlag:false,//微信环境判断
				cancelFlag:false,//弹框
				promptMessage:"取消订单将停止为您抢票，您确定要取消吗？",
			}
		},
		mounted() {
			this.orderNum = this.$route.query.orderNum || "";//订单号
			this.robTicketSpeedUpObj = robTicketSpeedUpObj;//抢票加速信息
			this.WeChatFlag = this.$publicMethod.WeChatFlag;//微信环境判断
			this.share = share;//分享函数
			this.getOrder();//获取订单详情
		},
		created() {
			
		},
		methods: {
			rightBtnEvent() { //右上角按钮
				this.$router.push({ //抢票须知
					name: "reserve",
					query: {
						ticketType:1,
					},
				});
			},
			getOrder(){ //获取订单详情
				var param = {
					orderNum: this.orderNum,
					orderType: "7"
				};
				this.isFirst && this.$loading.show();
				this.$http.post(this.$baseUrl.baseurl + "tctrain/train/localOrderDetail", param).then((res) => {
					this.isFirst && this.$loading.hide();
					if(res.data.Code == "0") {
						var message = res.data.Result.trainOrderDetailInfo;
            			var presellFlag = (message.order_num.indexOf("YHCQ") != -1) && (message.startTime) && (new Date(message.startTime.replace(/-/g, '/')).getTime() - new Date(message.sysTime.replace(/-/g, '/')).getTime() > 0);
            			message.presellFlag = presellFlag;//判断是抢票还是预约抢票
            			this.getHelpNum(message);
//          			console.log(JSON.parse(JSON.stringify(message)));
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					this.isFirst && this.$loading.hide();
					console.log(err);
				});
			},
			getHelpNum(message){//获取加速包数量
				var param = {
					orderNum: this.orderNum, 
					userId:this.$store.state.common.userinfo.userID,
				};
				this.isFirst && this.$loading.show();
//				this.$http.post(this.$baseUrl.baseurl + "KPCX/app/ScrambleForTicketsHelp/getHelpUserCount", param).then((res) => {
				this.$http.post(this.$baseUrl.baseurl + "kpcx/app/ScrambleForTicketsHelp/getHelpUserCount", param).then((res) => {
					this.isFirst && this.$loading.hide();
					if(res.data.Code == "0") {
						message.helpNum = res.data.Result.helpNum + message.grabGrade*10;//获得加速包的数量
						this.isShow = true;
						this.message = message;
						message.presellFlag || (this.timer = setTimeout(function(){
							this.isFirst = false;
							clearTimeout(this.timer);
							this.getOrder();
						}.bind(this),3000));//定时器启动
//						console.log(JSON.parse(JSON.stringify(this.message)));
						if (this.isFirst) {
							var str = "我正在抢到" + this.message.toStation + "的火车票，请求支援！"
							var url = this.$baseUrl.domainName + '/trainRobShare?userId=' + this.$store.state.common.userinfo.userID + "&orderNum=" + this.orderNum;
							this.share(str, str, "http://h5.kpcx179.com/wximages/train/8@2x.png", url);
						};
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					this.isFirst && this.$loading.hide();
					console.log(err);
				});
			},
			cancel(){
				this.cancelFlag = true;
			},
			cancelClick(){//蒙层点击
				this.cancelFlag = false;
			},
			cancelOrder(){ //取消订单
				var param = {
					orderNum: this.orderNum, 
					orderType:"7",
					orderNo:this.message.orderNo,
				};
				this.$loading.show();
				this.$http.post(this.$baseUrl.baseurl + "tctrain/train/cancelMyOrders", param).then((res) => {
					this.$loading.hide();
					if(res.data.Code == "0") {
						this.$toast("取消成功", {
							durtaion: 200,
							location: 'center',
						});
						var timer = setTimeout(function(){
							clearTimeout(timer);
							this.$router.push({//跳转
								name:"allOrder",
							});
						}.bind(this),1500);
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
			refresh(){//刷新
				this.$loading.show();
				this.message.presellFlag || this.getOrder();
				var timer = setTimeout(function(){
					clearTimeout(timer);
					this.$loading.hide();
				}.bind(this),1000)
			},
			changeShareShow(){
				this.shareShow = !this.shareShow;
			},
			WeChatFriendCircle(){ //盆友圈
				
			},
			WeChatFriend(){ //微信好友
				this.$router.push({ 
					name: "trainRobShare",
					query: {
						userId:this.$store.state.common.userinfo.userID,
						orderNum:this.orderNum,
					},
				});
			}
		},
		filters:{
			changeDate(date) {
				return new Date(date.replace(/-/g,"/")).format("MM月dd日hh:mm");
			},
			getHelpNum(helpNum){
				return (Number(String(helpNum)[0]) + 1) *10 - helpNum;
			},
			getRobGrade(helpNum){	
				var index = helpNum ? Number(String(helpNum)[0]) : 0;
				return robTicketSpeedUpObj[index].speed;
			},
			getPassengers(passengers){
				var arr = [];
				passengers.forEach(val=>{arr.push(val.passengerName)});
				return arr.join("，");
			},
			multiTicketTime(multiTicketTime,departDate){
				var arr = multiTicketTime ? multiTicketTime.split(",") : [];
				arr.unshift(departDate);
				arr.forEach((val,index)=>{
					arr[index] = new Date(val.replace(/-/g,"/")).format("MM月dd日");
				});
				return arr.join("，");
			},
			multiTrainNo(multiTrainNo,trainNo){
				var arr = multiTrainNo ? multiTrainNo.split("|") : [];
				arr.unshift(trainNo);
				return arr.join("，");
			},
			seatClass(mainSeatClassName,multiSeatClass){
				// console.log(mainSeatClassName,multiSeatClass);
				multiSeatClass = multiSeatClass ? multiSeatClass.replace(/\|/g,"，") : "";
				return multiSeatClass ? mainSeatClassName + "，" + multiSeatClass : mainSeatClassName;
			}
		},
		beforeRouteLeave(to, from, next) {
			clearInterval(this.timer); //清除定时器
			next();
		},
		components: {
			trainHeader,
			trainCancelMask
		},
	};
</script>